---
title: ArcGIS Online OAuth
description: Allow ArcGIS Online users to sign in with OAuth 2.0 to access their own information, private resources and premium services. Esri's <a href='https://github.com/esri/esri-leaflet#terms'>Terms of Use</a> require that appropriate attribution be displayed.
layout: example.hbs
---

<style>
  #auth {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: white;
    padding: 1em;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    border-radius: 4px;
  }

  #auth input {
    display: inline-block;
    border: 1px solid #999;
    font-size: 14px;
    border-radius: 4px;
    height: 28px;
    line-height: 28px;
  }
</style>

<div id="map"></div>
<div id="auth">
  <a href="#" id="sign-in">Sign In</a>
</div>

<script>
  var clientID = 'uoiMRafhECiH5uNE';
  var accessToken;
  var callbacks = [];
  var protocol = window.location.protocol;
  var callbackPage = protocol + '//esri.github.io/esri-leaflet/examples/oauth/callback.html';

  var authPane = document.getElementById('auth');
  var signInButton = document.getElementById('sign-in');

  // this function will open a window and start the oauth process
  function oauth(callback) {
    if(accessToken){
      callback(accessToken);
    } else {
      callbacks.push(callback);
      window.open('https://www.arcgis.com/sharing/oauth2/authorize?client_id='+clientID+'&response_type=token&expiration=20160&redirect_uri=' + window.encodeURIComponent(callbackPage), 'oauth', 'height=400,width=600,menubar=no,location=yes,resizable=yes,scrollbars=yes,status=yes');
    }
  }

  // this function will be called when the oauth process is complete
  window.oauthCallback = function(token) {
    L.esri.get('https://www.arcgis.com/sharing/rest/portals/self', {
      token: token
    }, function(error, response){
      authPane.innerHTML = '<label>Hi '+response.user.username+' your token is <input value="'+token+'"></label>';
    });
  };

  signInButton.addEventListener('click', function(e){
    oauth();
    e.preventDefault();
  });

  // make a new map and basemap
  var map = L.map('map').setView([39.36, -96.19], 4);
  L.esri.basemapLayer('Gray').addTo(map);
</script>
